<template>
	<view class="pay">
		<!-- style="background-image: url('https://s4.ax1x.com/2022/02/22/HxzAzD.png');background-repeat: no-repeat;
		background-size: 100% 380rpx;" -->
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="生活缴费" :autoBack="true" bgColor="#0B868E" leftIconColor="#fff"></u-navbar>
		</view>

		<view class="con-body">
			<!-- 新增缴费 -->
			<view class="uni-flex-center">
				<view style="height: 20rpx;"></view>
				<view class="main-service uni-cell-90">
					<view class="title title1">新增缴费</view>
					<u-gap height="10" bgColor="#f8f8f8"></u-gap>
					<view class="user-list" style="background-color: #fff;border-radius: 20rpx;">
						<view class="user-list-cell">
							<view style="width: 100%; background-color: #FFFFFF; border-radius: 15rpx;padding-bottom: 20rpx; margin-top: 20rpx;">
								<u-grid border col="3">
									<u-grid-item v-for="(baseListItem, baseListIndex) in baseList" :key="baseListIndex">
										<view style="padding-bottom: 20rpx;">
											<u-icon
												:customStyle="{ paddingTop: 20 + 'rpx' }"
												@click="navInto(baseListIndex)"
												:name="baseListItem.image"
												size="44"
												style="border-radius: 20rpx;"
												:label="baseListItem.name"
												labelPos="bottom"
												labelColor="#363636"
												space="10"
												labelSize="16"
											></u-icon>
										</view>
									</u-grid-item>
								</u-grid>
								<u-toast ref="uToast" />
							</view>
						</view>
					</view>
				</view>
				<u-toast ref="uToast" :loading="true"></u-toast>
				<u-modal :show="showHouse" title="提示" content='房屋绑定审核中...' :showCancelButton="true" confirmText="重新绑定" cancelText="等待审核" @confirm="bindHouse" @cancel="back"></u-modal>
			</view>
		</view>
	</view>
</template>

<script>
import { getFloor } from '@/service/userService.js';

export default {
	data() {
		return {
			baseList: [
				{
					name: '物业费',
					image: 'https://resourse.cnlhjt.com/upload/20220825/82b5e2bca6bf052133fe605c8780ec44.png'
				},
				{
					name: '车位费',
					image: 'https://resourse.cnlhjt.com/upload/20220825/dfb2bafee7beca6500af1ea3ccd8a63d.png'
				}
				// {
				// 	name: '水费',
				// 	image: 'https://resourse.cnlhjt.com/upload/20220825/e8b424409fc5009ee4318b74b13ec8ba.png'
				// }
			],
			myFee: [
				{
					icon: 'https://s1.ax1x.com/2022/07/28/vCeTU0.png',
					title: '水费',
					account: '0102312332',
					name: '**某'
				},
				{
					icon: 'https://s1.ax1x.com/2022/07/28/vCe75V.png',
					title: '电费',
					account: '0102312432',
					name: '**某'
				}
			],
			showHouse: false
		};
	},
	onLoad() {
		getFloor().then(this.getHouse);
	},
	methods: {
		getHouse(e) {
			if (e.code == 200) {
				this.actionsFloor = e.result;
			} else {
				if (e.msg == '等待审核') {
					this.showHouse = true;
				} else {
					this.$refs.uToast.show({
						type: 'error',
						title: '失败',
						message: e.msg,
						complete() {
							uni.navigateTo({
								url: '/pagesMine/house/index'
							});
						}
					});
				}
			}
		},
		bindHouse() {
			uni.navigateTo({
				url: '/pagesMine/house/index'
			});
		},
		back() {
			uni.navigateBack({
				delta: 1
			});
		},
		navInto(index) {
			switch (index) {
				case 0:
					this.$u.route({
						url: '/pagesHome/pay/property',
						params: {}
					});
					break;
				case 1:
					// this.$u.route({
					// 	url: '/pagesHome/pay/car',
					// 	params: {

					// 	}
					// });
					this.$refs.uToast.show({
						type: 'error',
						title: '失败',
						icon: false,
						message: '智慧生活，敬请期待'
					});
					break;
				default:
					console.log('暂不支持');
			}
		}
	}
};
</script>

<style>
page {
	background-color: #f8f8f8;
}
.main-service {
	width: 94%;
	margin-left: 3%;
	background-color: transparent;
	box-shadow: none;
}
.main-service .title {
	padding-left: 20rpx;
	background-position: 3% 85%;
}
.main-service .title1 {
	padding-left: 0;
	background-position: 0% 90%;
	background-image: url('https://resourse.cnlhjt.com/upload/20220825/53079139ae5b67d1270fc35fefba8d1e.png');
	background-size: 70px;
	background-repeat: no-repeat;
}
</style>
